<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2/8 0008
  Time: 18:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Easyui表单验证</title>
    <script type="text/javascript" src="js/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.1/demo/demo.css">
    <script type="text/javascript" src="js/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>

</head>
<body>
<div id="mydiv" class="easyui-panel" style="width:400px;height:350px" title="用户新增">
    <form id="myform"action="" method="post" >
        <table>
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="name" id="name" validType="midLength[2,5]" value=""/>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="text" class="easyui-validatebox"
                           required=true validType="equalLength[4]"
                           missingMessage="密码必填!" name="password"/>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    男<input type="radio" checked="checked" name="sex" value="男"/>
                    女<input type="radio" name="sex" value="女"/>
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input id="age" type="text" name="age" value=""/></td>
            </tr>
            <tr>
                <td>出生日期:</td>
                <td><input id="birthday" style="width:160px;" type="text" name="birthday" value=""/></td>
            </tr>
            <tr>
                <td>所属城市:</td>
                <td>
                    <input name="city" class="easyui-combobox" url="userServlet?method=getCity"
                           valueField="id" textField="name" value=""/>
                </td>
            </tr>
            <tr>
                <td>薪水:</td>
                <td><input id="salary" type="text" name="salary" value=""/></td>
            </tr>
            <tr>
                <td>开始时间:</td>
                <td><input id="startTime" style="width:160px;" type="text" name="startTime" value=""/></td>
            </tr>
            <tr>
                <td>结束时间:</td>
                <td><input id="endTime" style="width:160px;" type="text" name="endTime" value=""/></td>
            </tr>
            <tr>
                <td>个人描述:</td>
                <td><input type="text" name="description" class="easyui-validatebox" required=true
                           validType="midLength[5,50]" missingMessage="个人描述必填!" invalidMessage="描述必须在5到50个字符之间!"
                           value=""/></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <a id="btn" class="easyui-linkbutton">保存</a>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script type="text/javascript">
    //missingMessage:"用户名必填!" : 直接写在HTML中也是可以的,
    $(function () {
        $("#name").validatebox({
            required: true,
            missingMessage: "用户名必填!"
        })
        //自定校验器:
        $.extend($.fn.validatebox.defaults.rules, {
            //自定义名称,要与在validType="midLength[2,5]" 中定义的一致;
            //validType : 为自定义验证规则;
            midLength: {
                validator: function (value, param) {
                    return value.length >= param[0] && value.length <= param[1];
                },
                message: '用户名必须为2到10个字符之间.'
            },
            equalLength: {
                validator: function (value, param) {
                    return value.length >= param[0];
                },
                message: '密码至少为4位.'
            }
        });

        //数值验证组件
        $("#age").numberbox({
            required:true,
            min:0,
            max:150,
            precision:0,
            missingMessage:'年龄必填'
        });
        //日期验证组件
        $("#birthday").datebox({
            required:true,
            closeText:'关闭',
            editable:false,
            missingMessage:'日期必填'
        });
        //数值验证组件
        $("#salary").numberbox({
            min:1000 ,
            max:20000 ,
            required:true ,
            missingMessage:'薪水必填!' ,
            precision:2
        });
        //日期时间组件
        $('#startTime,#endTime').datetimebox({
            required:true ,
            missingMessage:'时间必填!' ,
            editable:false
        });

        /*
        $('#btn').click(function(){
            $('#myform').form('submit',{
                url:'userServlet?method=save' ,
                onSubmit:function(){
                    if(!$('#myform').form('validate')){
                        $.messager.show({
                            title:'提示信息' ,
                            msg:'验证没有通过,不能提交表单!'
                        });
                        return false ;		//当表单验证不通过的时候 必须要return false
                    }
                } ,
                success:function(result){
                    var result = $.parseJSON(result);
                    $.messager.show({
                        title:result.status ,
                        msg:result.message
                    });
                }
            });
        });
        */
        $("#btn").click(function () {
            $.ajax({
                type: "post",                    //请求方式
                url: 'userServlet?method=save',//地址
                cache: false,                    //是否情况缓存
                data: $("#myform").serialize(),    //向后台发送的数据
                dataType: "text",                 //服务器返回时接收的数据类型

                success:function (data) {
                    var data=$.parseJSON(data);
                        $.messager.show({
                            title:data.status,
                            msg: data.message
                        });
                },
                error:function (data) {
                    var data=$.parseJSON(data);
                    $.messager.show({
                        title:data.status,
                        msg: data.message
                    });
                }
            });
        });
        

    });
</script>
</html>
